<template>
  <div>
    <div style="text-align: center">
      <el-button v-if="conf.saveUrl" type="primary" icon="el-icon-plus" circle @click="()=>{typeInfo.newCreate = true;visible = true}"></el-button>
      <template v-if="typeInfo && typeInfo[conf.id]">
        <el-button v-if="conf.saveUrl" type="success"  @click.stop="visible = true" icon="el-icon-edit" circle></el-button>
        <el-button v-if="conf.removeUrl" type="danger" icon="el-icon-delete" circle @click.stop="removeNode"></el-button>
        <el-button type="warning" icon="el-icon-refresh" circle @click.stop="refreshNode"></el-button>
      </template>
<!--      <el-input  placeholder="搜索" v-model="searchVal" @change="searchData" style="width: 95%"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>-->
    </div>
    <el-tree
        class="tree-info"
        ref="tree"
        :props="conf.mapper"
        :load="loadSource"
        :expand-on-click-node="false"
        highlight-current
        lazy
        show-checkbox
        check-strictly
        :node-key="conf.id"
        @node-click="nodeClick"
    >
      <div slot-scope="{ node, data }" style="position: relative;width: 100%">
        <div>
          <i :class="data.isData ? 'el-icon-document' : 'el-icon-folder'"></i>
          {{ node.label }}
        </div>
      </div>
    </el-tree>
    <el-dialog :visible="visible" title="分类信息" @close="visible = false">
      <el-form label-width="80px" label-position="right">
        <slot :entity="typeInfo">
          <el-form-item label="分类名称">
            <el-input v-model="typeInfo.typeName"></el-input>
          </el-form-item>
        </slot>
        <el-form-item>
          <el-button type="primary" :loading="loading" icon="el-icon-check" @click="saveType">{{ typeInfo.newCreate ? '新增' : '更新' }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "LabTree",
  props: {
    conf: {
      type: Object,
      default: function () {
        return { queryUrl: '', saveUrl: '', removeUrl: '' ,id: 'id', parentId: 'parentId', mapper: { children: 'children', label: 'label' }}
      }
    },
    loadData: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      selectNode: {},
      typeInfo: {},
      searchVal: ''
    }
  },
  methods: {
    loadSource(node, resolve) {
      if (!this.conf.queryUrl) {
        return
      }
      const parentId = node.data ? node.data[this.conf.id] : '#'
      this.$post(this.conf.queryUrl, {
        page: 1, pageSize: 100, filters: [
          { field: this.conf.parentId, op: '=', value: parentId }
        ]
      }).then(res => {
        this.$resultMsg(this, res, true)
        const list = res.data.records || []
        if (this.loadData) {
          this.loadData(node, list, resolve)
        } else {
          resolve(list)
        }
      })
    },
    searchData(){

    },
    nodeClick(data, node, dom) {
      this.$emit('click', data, node)
      if (!data.isData) {
        this.$refs.tree.setCheckedKeys([data.typeId]);
        this.refreshNode(node)
        this.selectNode = node
        this.$Util.cleanObj(this, this.typeInfo)
        this.$Util.copyAttr(data, this.typeInfo, null, this)
      }
    },
    removeNode() {
      this.$remove(this, this.conf.removeUrl + this.typeInfo[this.conf.id])
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              if (this.selectNode && this.selectNode.parent) {
                this.refreshNode(this.selectNode.parent)
              }
            }
          })
    },
    refreshNode(node) {
      if (node && node.expand) {
        node.loaded = false
        node.expand()
      } else if (this.selectNode && this.selectNode.expand) {
        this.selectNode.loaded = false
        this.selectNode.expand()
      }
    },
    saveType() {
      const body = this.$Util.copy(this.typeInfo)
      if (this.typeInfo.newCreate) {
        body[this.conf.parentId] = body[this.conf.id]
        body[this.conf.id] = ''
        this.typeInfo.newCreate = false
      }
      this.$post(this.conf.saveUrl, body)
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              this.visible = false
              if (body.newCreate) {
                this.refreshNode(this.selectNode)
              } else if (this.selectNode && this.selectNode.parent) {
                this.refreshNode(this.selectNode.parent)
              }
            }
          })
    }
  }
}
</script>

<style lang="scss">
 .tree-info {
   .right_menu{
     position: absolute;
     top: -18px;
     right: 12px;
     padding: 12px;
     //background: rgb(239, 239, 241);
     //border: 1px solid rgb(241, 241, 241);
     border-radius: 2%;
   }
 }
</style>
